<template>
  <el-dialog
    top="30px"
    width="1100px"
    class="dialog-sm"
    append-to-body
    title="异常管理"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <el-form @submit.native.prevent class="query-table-form" :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="借款人/担保客户查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          :auto-top="1"
          placeholder="地址查询"
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.bank_name"
          placeholder="银行名称查询"
          clearable
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="queryDate"
          type="month"
          placeholder="选择月"
          :picker-options="pickerOptions"
          @change="handleDateQuery()"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>
    <c-table
      border
      height="70vh"
      class="table-sm"
      ref="multipleTable"
      name="table"
      v-loading="loading"
      :columns="tableColumns"
      :row-key="getRowKeys"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:address="scope">
        <div class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</div>
      </template>
      <template v-slot:reason="scope">
        <el-tooltip v-if="scope.row.ex_des">
          <div class="text-truncate text-danger">{{ scope.row.ex_des }}</div>
          <div slot="content">
            <span>{{ scope.row.ex_des }}</span>
          </div>
        </el-tooltip>
        <span v-else>-</span>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <div class="text-center mt-2">
      <el-button
        @click="onSbmit"
        :disabled="!selectData.length"
        type="danger"
        :loading="submitLoading"
        class="btn-long"
      >
        删除
      </el-button>
      <el-button @click="beforeClose" class="btn-long">取消</el-button>
    </div>

    <el-dialog
      append-to-body
      top="30px"
      width="1100px"
      :close-on-click-modal="false"
      :visible.sync="oneIndustryVisible"
    >
      <industry-credit :one-industry="oneIndustry"></industry-credit>
    </el-dialog>
  </el-dialog>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
import { enumCustomType } from '@/bank/views/hnd/ProjectNewDialog'
import { mapGetters } from 'vuex'
import IndustryCredit from '@/bank/components/IndustryCredit'
import { pickerOptions } from '@/bank/views/hnd/RecommendPass'
export default {
  components: {
    SelectAddress,
    IndustryCredit,
  },
  props: {
    visible: Boolean,
  },
  data() {
    return {
      pickerOptions,
      enumCustomType,
      loading: false,
      submitLoading: false,
      params: {
        index: 1,
        size: 15,
        'import_status.eq': 2,
        'is_deleted.neq': 1,
      },
      tableName: 'datum_one_county_industry',
      tableColumns: [
        { attrs: { label: '选择', type: 'selection', align: 'center', reserveSelection: true } },
        { attrs: { label: '借款人/担保客户', prop: 'customer_name', minWidth: '120px' } },
        {
          attrs: {
            label: '行业类型',
            prop: 'main_business_bank',
            align: 'center',
            minWidth: '110px',
          },
        },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '联系电话', prop: 'corp_phone', align: 'center' } },
        { attrs: { label: '导入银行', prop: 'bank_name', align: 'center' } },
        { attrs: { label: '放款日/拟担保起始日', prop: 'loadDate', align: 'center' } },
        { attrs: { label: '到期日', prop: 'loadEndDate', align: 'center' } },
        { attrs: { label: '贷款期限', prop: 'warranty_period', align: 'center' } },
        { attrs: { label: '贷款金额/拟担保金额(万元)', prop: 'warranty_amount', align: 'center' } },
        {
          attrs: { label: '异常原因', align: 'center', prop: 'not_pass_reason', width: '120px' },
          slot: 'reason',
        },
        { attrs: { label: '导入时间', prop: 'create_time', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', width: '80px' },
          operations: [{ content: '详情', icon: 'fa fa-search', event: this.showCreditFile }],
        },
      ],
      tableData: [],

      selectData: [],

      oneIndustry: {},
      oneIndustryVisible: false,
      tableCount: 0,
      queryDate: '',
    }
  },
  computed: {
    ...mapGetters(['user', 'clientId', 'org']),
  },
  created() {
    this.params['bank_code.endlike'] = this.org.orgCode
    this.getData()
  },
  methods: {
    fetchData(params) {
      return this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, params, this.order || {})
      )
    },
    showCreditFile(row = {}) {
      this.oneIndustry = row
      this.oneIndustryVisible = true
    },
    handleDateQuery() {
      const startTime = this.queryDate
        ? `${this.queryDate.getFullYear()}-${this.queryDate.getMonth() + 1}-1`
        : ''
      const endTime = this.queryDate
        ? `${this.queryDate.getFullYear()}-${this.queryDate.getMonth() + 2}-1`
        : ''
      this.params['create_time.gte'] = startTime
      this.params['create_time.lt'] = endTime
      this.getData()
    },
    async getData() {
      this.loading = true
      const [res = {}] = await this.fetchData(this.params)
      this.loading = false

      const data = (res && res.data) || []
      this.tableData = data.data.map(this.dataAdapter)
      this.tableCount = data.totalCount || 0
    },
    dataAdapter(item) {
      item.loadDate = this.$utils.dateFormat(item.load_date, 'yyyy-MM-dd')
      item.loadEndDate = this.$utils.dateFormat(item.load_end_date, 'yyyy-MM-dd')

      return item
    },
    getRowKeys(row) {
      return row.customer_related_id
    },
    handleSelectionChange(select) {
      this.selectData = select
    },
    onSbmit() {
      const updateList = []
      this.selectData.forEach(item => {
        if (!item.customer_related_id) {
          return
        }
        updateList.push({
          customer_related_id: item.customer_related_id,
          is_deleted: 1,
        })
      })
      this.$utils
        .msgbox({
          message: `确定申请删除已选的${this.selectData.length}个客户?`,
          beforeClose: () => this.$api.updateBatch(this.$serviceName, this.tableName, updateList),
        })
        .then(() => {
          this.$message.success('删除成功')
          this.getData()
          this.$emit('success', true)
          this.beforeClose()
        })
        .catch(() => this.$message.error('删除失败，请重试！'))
    },
    clearAll() {
      this.selectData = []
      const $tableRef = this.$refs.multipleTable.$refs.table
      $tableRef.clearSelection()
    },
    beforeClose() {
      this.clearAll()
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.table-label {
  text-align: left;
  width: 140px;
  color: #99a9bf;
}
</style>
